<template>
 <div class="conference">
   	<div class="content">
   		<ul>
   			<li v-for="item in arrList">
   				<a @click=jump(item)>
   					<p class="tit">{{item.name}}</p>
   					<div class="time">
	   					<i class="fa fa-clock-o"></i>
	   					<span>时间:</span>
	   					<span class="stime">{{ item.stime | ymd }}</span>
	   				</div>
   					<div class="site">
   						<i class="fa fa-map-marker"></i>
   						<span>地点:</span>
   						<span>{{item.city | checkNull}}</span>
   						<span class="state1 state" v-if="item.sigeUp='false'">立即报名</span>
   					</div>
   				</a>
   			</li>
   		</ul>
   	</div>
   	<div @click="backTop()" v-show="backTopShow" class="back-top">
   		<img src="../assets/top.png" alt="">
   	</div>		
 </div>
</template>

<script>
	/*1.判断浏览器是否发生了滚动2.判断滚动后图标显示或隐藏 3.返回顶部*/
	export default {
		data() {
			return {
				arrList:[],
				backTopShow:false
			}
		},
		filters:{
			checkNull:(data)=>{
				return data = ''? data:'待定';
			},
			ymd:(data)=>{
				var arr = data.split(' ');
				return arr[0];
			}
		},
        created(){
			this.$root.Hub.$on('applied', (state) => {
        		this.state=state
        	})
        },
        mounted() {
        	this.fetchData();
        	window.addEventListener('scroll',this.handleScroll);
        },
        methods: {
        	fetchData() {
        		var _this = this;
        		this.$http.get('http://www.gconfs.com/index/search.do')
        		.then(function(res){
        			_this.arrList = res.data.data.activity;
        		}).catch(function(err){
        			console.log(err);
        		})
        	},
        	backTop () {
	     	   let back = setInterval(() => {
	     	   	    //获取当前页面滚动条纵坐标的位置
	     	   	    if(document.body.scrollTop||document.documentElement.scrollTop){
		     	   	 	document.body.scrollTop -=50;
		     	   	 	document.documentElement.scrollTop-=50;
		     	   	 }else {
		     	   	 	clearInterval(back)
		     	   	 }
		     	   })  		
		    },
		    handleScroll(){
		     	if(document.documentElement.scrollTop + document.body.scrollTop > 50) {
		     		this.backTopShow = true;
		     	} else {
		     		this.backTopShow = false;
		     	}
     		},
     		jump(item){
     			this.$router.push({path:'/conDetail/'+item.id});
     			// item.state=='0'?{path:'/Invite/'+item.id}:
     		}
        },
        beforeDestroy() {
		    this.$root.Hub.$off('applied')
		}
	}
</script>

<style scoped lang="less">
	.conference{
		padding-top: 1.5rem;
		padding-bottom: 50px;
		background: #f4f4f4;
		.back-top {
		    position: fixed;
		    right: 15px;
		    bottom:100px;
		    img{width: 0.8rem;height: 0.8rem;}
		} 
	}
	.content{
		padding: 10px;
		color: #333;
		background: #f4f4f4;
		h2{font-size: 0.45rem;color: #ff6100;font-weight: bold;padding: 10px 20px 0;}
		li{ 
			background: #fff;
			padding: 8px 20px;
			margin: 10px 0;
			border-radius: 5px;
			.tit{
				font-size: 0.3rem;
			}
			a{
				color: #333;
			}
			.time{
				font-size: 0.25rem;
				margin: 10px 0;
				color: #777;
			}
			.site{
				font-size: 0.25rem;
				margin: 10px 0;
				position: relative;
				color: #777;
				.state{
					position: absolute;
					bottom: -5px;
					right: 10px;
					padding: 4px 16px;
					border-radius: 20px;
					color: #fff;
				}
				.state1,.state3,.state4,.state5{
					background: #ff6100;
				}
				.state2{
					background: #ccc;
				}
			}
			i{
				color: #ff6100;
				font-size: 0.34rem;
				padding: 0 3px;
			}
			.fa-map-marker{
				padding-left: 7.5px;
			}

		}
	}
</style>